<!--
	竞赛交流主页
	author yjl
-->
<template>
	<view class="forum-home">
		<view class="nav">
			<top-navs
				:navs="navs"
				v-model="currentNav"
			/>
		</view>
		<Talents
			:ref="navs[currentNav].ref"
			v-if="navs[currentNav].ref==='Talent'"
		/>
		<!-- <Teams
			:ref="navs[currentNav].ref"
			v-else-if="navs[currentNav].ref==='Team'"
		/> -->
		<Forums
			:ref="navs[currentNav].ref"
			v-else-if="navs[currentNav].ref==='Forum'"
		/>
		<AhaTabbar />
	</view>
</template>

<script>
import Talents from './Talents'
import Teams from './Team'
import Forums from './Forum'
export default {
  components: {
    Talents, Teams, Forums
  },
  data() {
    return {
      navs: [ // 顶部导航
        { label: '人才市场', ref: 'Talent' },
        // { label: '竞赛组队', ref: 'Team' },
        { label: '竞赛讨论', ref: 'Forum' },
      ],
      currentNav: 0
    }
  },
  watch: {
    /* 每次切换都滚动到顶部 */
    currentNav: function() {
      uni.pageScrollTo({
        duration: 0,
        scrollTop: 0,
      })
    }
  },
  onReachBottom() {
    this.$checkFn(this.$refs[ this.navs[ this.currentNav ].ref ].reachBottom)
  }
}
</script>

<style lang="scss" scoped>
.forum-home {
  padding-top: 50px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: $white1;

  .nav {
    z-index: 10;
    background-color: #ffffff;
    border-bottom: $border2;
  }
}
</style>
